<template>
    <div id="top" v-if="isShow">
        <div class="rightBtn">
            <div v-if="hasToken">
                <span v-show="$route.path !== '/home'" @click="$router.push('/home')">首页</span>
                <span @click="toUserInfo">个人中心</span>
                <span @click="toMyOrder">我的订单</span>
                <span @click="toMyCollect">我的收藏</span>
                <span @click="toMyShopCar">购物车</span>
                <span>欢迎 {{ username }}</span>
                <span @click="toOutLogin">退出</span>
            </div>
            <div v-else>
                <span @click="toLogin">登录</span>
                <span @click="toRegister">注册</span>
            </div>
        </div>
    </div>
</template>

<script>
import { getToken, removeToken } from "@/utils/auth";
export default {
    data() {
        return {
            username: this.$store.state.userInfo
                ? this.$store.state.userInfo.username
                : "XXXX",
            hasToken: getToken(),
            isShow: this.$store.state.isShowHeadFoot,
        };
    },
    created() {},
    methods: {
        // 跳转到个人信息页面
        toUserInfo() {
            this.$router.push("/userInfo");
        },
        // 跳转到 我的订单
        toMyOrder() {
            this.$router.push("/order");
        },
        // 跳转到 我的收藏
        toMyCollect() {
            this.$router.push("/collect");
        },
        // 退出登录
        toOutLogin() {
            // 清除token
            removeToken();
            this.$router.push("/login");
        },
        // 跳转到登录页面
        toLogin() {
            this.$router.push("/login");
        },
        // 跳转到注册页面
        toRegister() {
            this.$router.push("/register");
        },
        toMyShopCar() {
            this.$router.push("/shopCar");
        },
    },
};
</script>
<style lang="scss" scoped>
#top {
    height: 40px;
    background-color: #b11e22;

    .rightBtn {
        margin-right: 10%;
        float: right;
        line-height: 40px;
        color: #fff;
        span {
            margin-left: 20px;
            &:hover {
                cursor: pointer;
            }
        }
    }
}
</style>
